<template>
    <div class="Level">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">花艺师等级</p>
        </Top>
        <div class="main-noFoot" v-loading="loading" v-if="infos">
            <cube-scroll>
                <!--信息区-->
                <div class="info-body">
                    <h1>我的等级</h1>
                    <div class="level-badge">
                        <b>{{infos.my_level}}</b>
                        <img class="imgFull" src="../../assets/exam/level-badge.png" alt="" />
                    </div>
                    <h2>等级：{{infos.my_level_str}}</h2>
                    <h3>已击败{{infos.beats}}的花艺师，继续晋级<i class="el-icon-arrow-right"></i></h3>
                    <div class="level-progress">
                        <div class="cross">
                            <p class="inner" :style="{'width':(infos.my_level-1)*25+'%'}"></p>
                            <p class="outer"></p>
                        </div>
                        <ul class="level-list">
                            <li 
                                v-for="(item,index) in 5"
                                :class="{'on':infos.my_level>=item}">Lv{{item}}</li>
                        </ul>
                    </div>
                    <img src="../../assets/exam/level-wave.png" alt="" class="level-wave" />
                </div>
                <!--等级奖牌区-->
                <div class="medal-body">
                    <h1>花艺测试</h1>
                    <ul class="medal-list">
                        <!--已通过-->
                        <li v-for="(item,index) in tested" :key="index">
                            <!--奖牌图片-->
                            <div class="medal-pic">
                                <img class="imgFull" src="../../assets/exam/medal-a.png" alt="" />
                                <b v-if="index<infos.my_level">{{index+1}}</b>
                                <img v-else src="../../assets/exam/lock-a.png" alt="" class="lock" />
                            </div>
                            <!--等级 星星-->
                            <div class="level-star">
                                <h2>等级：<b>{{item.level_str}}</b></h2>
                                <div class="star-box">
                                    <img v-for="(item2,index2) in item.star_num" src="../../assets/exam/star.png" alt="" />
                                </div>
                            </div>
                            <!--文字描述-->
                            <p>
                                <span>已有{{item.passPeoples}}人通过测试<b v-if="index<infos.my_level">，您是第{{item.pass_mine}}位通过测试</b></span>
                                <button @click="gotoTest(item.star_num)" v-if="index>=infos.my_level">立即测试</button>
                            </p>
                        </li>
                        <!--未通过-->
                        <li class="wait-test" v-for="(item,index) in waitTest" >
                            <!--奖牌图片-->
                            <div class="medal-pic">
                                <img class="imgFull" src="../../assets/exam/medal-b.png" alt="" />
                                <img src="../../assets/exam/lock-b.png" alt="" class="lock" />
                            </div>
                            <!--等级 星星-->
                            <div class="level-star">
                                <h2>等级：<b>{{item.level_str}}</b></h2>
                                <div class="star-box">
                                    <img v-for="(item2, index2) in item.star_num" :key='index2' src="../../assets/exam/star-b.png" alt="" />
                                </div>
                            </div>
                            <!--文字描述-->
                            <p>
                                <span>已有3474人通过测试</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </cube-scroll>
        </div>
        <!--测试弹窗-->
        <div class="mask" v-if="shareWindowShow">
            <div class="share-content-window">
                <div class="close" @click="shareWindowShow=false">
                    <img class="imgFull" src="../../assets/exam/close.png" alt="" />
                </div>
                <!--提示弹窗-->
                <div class="type-wrap has-test" v-if="innerType===1">
                    <h3>今天您已经测试过了，请明天继续测试哦！</h3>
                </div>
                <!--成功弹窗-->
                <div class="type-wrap success" v-if="innerType===2">
                    <h3>{{msg}}</h3>
                    <button>继续晋级</button>
                </div>
                <!--分享列表-->
                <div class="share-wrapper" v-if="inApp() || isWeiXin()">
                    <!-- <fieldset class="noMore">
                        <legend align="center" class="noMoreText">分享</legend>
                    </fieldset> -->
                    <p class='field-set'>分享至</p>
                    <!--列表-->
                    <ul class="share-list">
                        <li @click="shareLevel(0)">
                            <img src="../../assets/exam/tk_weixin.png" alt="">
                            <p>微信好友</p>
                        </li>
                        <li @click="shareLevel(1)">
                            <img src="../../assets/exam/tk_friend.png" alt="">
                            <p>朋友圈</p>
                        </li>
                        <li @click="shareLevel(2)" v-if="inApp()">
                            <img src="../../assets/exam/tk_weibo.png" alt="">
                            <p>微博</p>
                        </li>
                        <li @click="shareLevel(3)">
                            <img src="../../assets/exam/tk_QQzone.png" alt="">
                            <p>QQ空间</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--微信分享引导图-->
        <div class="mask" @click="wxShareShow=false" v-if="wxShareShow">
            <img class="share-wx" src="../../assets/exam/share-wx.png" alt="" />
        </div>

    </div>
</template>

<script>
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Level',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                wxShareShow:false,//微信引导图显示状态
                level:5,//花艺师等级
                shareWindowShow:false,//弹窗显示状态
                innerType:2,//弹窗类型 1.已经测试过 2.通过测试
                msg:'恭喜您通过一级花艺师测试',//
                infos:null,
                tested:[],//已测试 和 可以测试
                waitTest:[],//待测试
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.exam.getMineLevel',{member_id:this.getMemberId()},(res)=>{
                this.loading = false
                let data = JSON.parse(res.bodyText).data
                this.infos = data
                this.tested = data.level_list.slice(0,data.my_level+1)
                this.waitTest = data.level_list.slice(data.my_level+1,data.level_list.length)
            })  
        },
        methods:{
            /*分享*/
            shareLevel(index){
                if(this.deviceType() === 1){//安卓 shareHy(String title,String content,String url,String imageUrl,int type) type=0表示分享花艺师测评，1-表示分享课程
                    window.hy.shareHy('我的花艺师等级',this.msg,window.location.href,'http://www.huawa.com/static/st/images/huawa/log1.png',index)
                }else if(this.deviceType() === 2){//IOS
                    let data = {
                        title:'我的花艺师等级',
                        contentL:this.msg,
                        url:window.location.href,
                        imageUrl:'http://www.huawa.com/static/st/images/huawa/log1.png',
                        type:index
                    }
                    window.webkit.messageHandlers.shareHy.postMessage(JSON.stringify(data))  
                }else{//WAP-wechat
                    if(this.isWeiXin()){
                        this.wxShareShow = true;
                    }
                }
            },
            /*立即测试*/
            gotoTest(num){
                switch(num){
                    case 1:
                        if(this.infos.has_test_today===0){
                            this.$router.push('/bag/testOne')
                        }else{
                            this.$message.warning('今天您已经测试过了，请明天再来~')
                        }
                        break;
                    case 2:
                        if(this.infos.has_test_today===0){
                            this.$router.push('/bag/testTwo')
                        }else{
                            this.$message.warning('今天您已经测试过了，请明天再来~')
                        }
                        break;
                    case 3:
                        if(this.infos.has_test_today===0){
                            if(this.deviceType()===1){//安卓
                                window.hy.toTest('3')
                            }else if(this.deviceType()===2){//ios
                                window.webkit.messageHandlers.toTest.postMessage('3') 
                            }else{//wap
                                this.$message.warning('请下载花娃APP进行三星花艺师测试~')
                                this.$router.push('/bag/upguid')
                            }
                        }else{
                            this.$message.warning('今天您已经测试过了，请明天再来~')
                        }
                        break;
                    case 4:
                        if(this.infos.has_test_today===0){
                            if(this.deviceType()===1){//安卓
                                window.hy.toTest('4')
                            }else if(this.deviceType()===2){//ios
                                window.webkit.messageHandlers.toTest.postMessage('4') 
                            }else{//wap
                                this.$message.warning('请下载花娃APP进行四星花艺师测试~')
                                this.$router.push('/bag/upguid')
                            }
                        }else{
                            this.$message.warning('今天您已经测试过了，请明天再来~')
                        }
                        break;
                    case 5:
                        if(this.infos.has_test_today===0){
                            if(this.deviceType()===1){//安卓
                                window.hy.toTest('5')
                            }else if(this.deviceType()===2){//ios
                                window.webkit.messageHandlers.toTest.postMessage('5') 
                            }else{//wap
                                this.$message.warning('请下载花娃APP进行五星花艺师测试~')
                                this.$router.push('/bag/upguid')
                            }
                        }else{
                            this.$message.warning('今天您已经测试过了，请明天再来~')
                        }
                        break;
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Level{
        font-size: .24rem;
        .mask{
            background-color: rgba(51,51,51,.6);
        }
        /*微信分享引导图*/
        .share-wx{
            width: 100%;
            position: absolute;
            top: 20%;
            left: 0;
        }
        /*头部信息区*/
        .info-body{
            background-color: #382c1e;
            color: #715f4a;
            padding: .22rem .22rem .34rem;
            text-align: center;
            position: relative;
            b{
                font-weight: 600;
            }
            h1{
                font-size: .24rem;
                text-align: left;
            }
            .level-badge{
                width: 1.36rem;
                height: .92rem;
                display: block;
                font-size: 0;
                margin: .12rem auto .24rem;
                position: relative;
                b{
                    font-size: .4rem;
                    position: absolute;
                    left: calc(50% - .1rem);
                    top: calc(50% - .2rem);
                    z-index: 10;
                    color: #fff;
                }
            }
            h2{
                font-size: .26rem;
                color: #cea75a;
            }
            h3{
                margin: .12rem 0 .34rem;
            }
            .level-wave{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: auto;
            }
            .level-progress{
                position: relative;
                width: 100%;
                height: .54rem;
                .cross{
                    width: 100%;
                    height: 2px;
                    position: absolute;
                    left: 0;
                    top: calc(50% - 1px);
                    z-index: 9;
                    overflow: hidden;
                    .inner{
                        width: 25%;
                        height: 100%;
                        background-color: #cea75a;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    .outer{
                        width: 100%;
                        height: 100%;
                        background-color: #7d7461;
                    }
                }
                .level-list{
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    li{
                        width: .54rem;
                        height: .54rem;
                        line-height: .54rem;
                        border-radius: 100%;
                        background-color: #5f594d;
                        color: #7d7461;
                        text-align: center;
                        position: relative;
                        &.on{
                            color: #6a4600;
                            background-color: #cea75a;
                        }
                    }
                }
            }
        }
        /*等级 奖牌区*/
        .medal-body{
            &>h1{
                height: .9rem;
                line-height: .9rem;
                font-weight: 600;
                color: #333;
                border-bottom: 1px solid #ededed;
                font-size: .26rem;
                padding: 0 .22rem;
            }
            .medal-list{
                padding: .22rem;
                li{
                    width: 100%;
                    background-color: #e1a500;
                    background-image: linear-gradient(90deg, #f2a328, #e1a500);
                    color: #fff;
                    position: relative;
                    border-radius: 6px;
                    margin-bottom: .24rem;
                    &.wait-test{
                        background-color: #c7c7c7;
                        background-image: none;
                        color: #a6a6a6;
                        &>p{
                            border-top: 1px solid #afafaf;
                        }
                    }
                    /**/
                    .medal-pic{
                        width: 1rem;
                        height: 1.4rem;
                        position: absolute;
                        left: .3rem;
                        top: 0;
                        &>b{
                            font-size: .4rem;
                            font-weight: 600;
                            color: #d68d00;
                            position: absolute;
                            top: 51%;
                            left: calc(50% - .1rem);
                        }
                        &>.lock{
                            width: .27rem;
                            height: .35rem;
                            position: absolute;
                            top: 51%;
                            left: calc(50% - .14rem);
                        }
                    }
                    /**/
                    .level-star{
                        width: 100%;
                        text-align: right;
                        padding: .5rem .22rem .34rem;
                        h2{
                            b{
                                font-size: .34rem;
                            }
                        }
                        .star-box{
                            margin-top: .2rem;
                            img{
                                width: .28rem;
                                height: .28rem;
                            }
                        }
                    }
                    /**/
                    &>p{
                        width: 100%;
                        padding: .22rem;
                        border-top: 1px solid #f1c345;
                        display: flex;
                        align-items: center;
                        color: #fff;
                        font-size: .26rem;
                        letter-spacing: 1px;
                        span{
                            flex: 1;
                        }
                        button{
                            border: 0;
                            color: #ffd86e;
                            background-color: #9a5e16;
                            border-radius: 6px;
                            outline: none;
                            padding: .12rem .2rem;;
                        }
                    }
                }
            }
        }
    }
</style>
